import { ref, reactive } from 'vue';
import { defineStore } from 'pinia';
import { storage } from '@/utils/index.js';

export const loginStore = defineStore('login', () => {
	const uid = ref(storage.getItem('uid'));
	const isLogin = ref(storage.getItem('isLogin'));
	const token = ref(storage.getItem('token'));
	const isSmallScreen = ref(false);
	let userInfo = ref(storage.getItem('userInfo'));
	
	function setUid(val) {
		uid.value = val;
		storage.setItem('uid', val);
	}
	
	function setLogin(val) {
		isLogin.value = val;
		storage.setItem('isLogin', val);
	}
	
	function setToken(val) {
		token.value = val;
		storage.setItem('token', val);
	}
	
	function setUserInfo(val) {
		userInfo.value = val;
		storage.setItem('userInfo', val);
	}
	
	function setScreen(val) {
		isSmallScreen.value = val;
	}
	
	function setLogout() {
		uid.value = '';
		token.value = '';
		isLogin.value = false;
		userInfo.value = null;
		
		storage.removeItem('uid');
		storage.removeItem('token');
		storage.removeItem('isLogin');
		storage.removeItem('userInfo');
	}

	return {
		uid,
		isLogin, 
		token,
		userInfo,
		setUid,
		setLogin, 
		setToken,
		setUserInfo,
		setLogout,
		isSmallScreen,
		setScreen
	};
});